<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta charset="utf-8"/>
    <link rel="shortcut icon" type="image/x-icon" href="../../../images/jsmile.ico"/>
    <title>日志管理</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_763780_tdovyxg8qq9.css">
    <link rel="stylesheet" href="../../../libs/vue/theme-chalk/elementui.css">
    <link rel="stylesheet" href="../../../css/index.css">
    <script src="../../../libs/vue/vue.js"></script>
    <script src="../../../libs/jquery/jquery.mini.js"></script>
    <script src="../../../libs/vue/elementui.js"></script>
    <script src="../../../libs/layer/layer.js"></script>
    <script src="../../../javascript/kit/jsmile.js"></script>
    <script src="../../../javascript/kit/vue-ext.js"></script>
</head>
<body>
<div id="app">
    <div>
        <el-breadcrumb separator="/" style="display: inline-block;">
            <el-breadcrumb-item><a @click="goHome()">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="#">系统监控</a></el-breadcrumb-item>
            <el-breadcrumb-item>日志管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <el-form :inline="true" :model="searchLog" class="query-form">
        <el-row>
            <el-col :span="3">
                <el-form-item>
                    <el-select v-model="searchLog.logType" clearable  placeholder="全部类型" style="width: 100%;">
                        <el-option
                                v-for="item in dicts.type"
                                :key="item.dictValue"
                                :label="item.dictName"
                                :value="item.dictValue">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="3">
                <el-form-item>
                    <el-select v-model="searchLog.systemId" clearable  placeholder="全部系统" style="width: 100%;">
                        <el-option
                                v-for="item in dicts.system"
                                :key="item.dictValue"
                                :label="item.dictName"
                                :value="item.dictValue">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="3">
                <el-form-item>
                    <el-select v-model="searchLog.isOk" clearable  placeholder="是否成功" style="width: 100%;">
                        <el-option
                                v-for="item in dicts.status"
                                :key="item.dictValue"
                                :label="item.dictName"
                                :value="item.dictValue">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item>
                    <el-date-picker style="width: 100%;"
                                    v-model="searchLog.startEndDate"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item>
                    <el-input placeholder="用户名/姓名/标题" clearable v-model="searchLog.name" class="input-with-select" style="width: 100%;">
                        <el-button slot="append" icon="el-icon-search" @click="query"></el-button>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="2" :offset="1">
                    <el-button type="primary" @click="exportExcel">导出</el-button>
            </el-col>
        </el-row>
    </el-form>

    <el-table :data="logList"  border highlight-current-row size="small" height="calc(100vh - 164px)" style="margin-top:10px;">
        <el-table-column prop="title" label="标题" width="120" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="100" sortable></el-table-column>
        <el-table-column prop="ip" label="ip地址" width="100" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="os" label="操作系统" width="100"></el-table-column>
        <el-table-column prop="browser" label="浏览器" width="100"></el-table-column>
        <el-table-column prop="logTypeName" label="类型" width="80"></el-table-column>
        <el-table-column prop="createTime" label="记录时间" width="160" sortable></el-table-column>
        <el-table-column prop="reqMethod" label="请求方式" width="80"></el-table-column>
        <el-table-column prop="reqParam" label="请求参数">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>返回值: {{ scope.row.reqParam }}</p>
                    <div slot="reference" class="name-wrapper">
                        {{ scope.row.reqParam }}
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="resParam" label="返回值">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>返回值: {{ scope.row.resParam }}</p>
                    <div slot="reference" class="name-wrapper">
                        {{ scope.row.resParam }}
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="exception" label="异常信息">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>异常信息: {{ scope.row.exception }}</p>
                    <div slot="reference" class="name-wrapper">
                        {{ scope.row.exception }}
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="isOk" label="是否成功" width="80">
            <template slot-scope="scope">
                <el-tag
                        :type="scope.row.isOk === '1' ? 'success' : 'danger'"
                        disable-transitions>{{scope.row.isOk==1?"成功":"失败"}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="reqUrl" label="请求地址" width="100" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="timeConsuming" label="耗时" width="80"></el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchLog.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchLog.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchLog.total">
    </el-pagination>

</div>
<script src="../../../javascript/sys/log/log.js"></script>
</body>
</html>